<template>
  <v-card flat height="800" class="pl-7 pr-7 pt-15">
    <div class="d-flex container">
      <div class="month">
        <h3 class="list-header">Month</h3>
        <v-checkbox
          v-model="selectedMonths"
          v-for="(month, index) in months"
          v-validate="'required'"
          name="Month"
          :key="index"
          :value="month"
          :label="month"
          class="mt-0 pb-2"
          hide-details
        ></v-checkbox>
        <v-checkbox
          @change="checkedAllMonths"
          :indeterminate="indeterminateMonths"
          :input-value="isCheckedAllMonths"
          label="All"
          class="ma-0"
        ></v-checkbox>
      </div>
      <div class="weeks">
        <h3 class="list-header">Week</h3>
        <v-checkbox
          v-model="selectedWeeks"
          v-for="(week, index) in weeks"
          v-validate="'required'"
          name="Week"
          :key="index"
          :value="week"
          :label="week"
          hide-details
          class="mt-0 pb-2"
        ></v-checkbox>
        <v-checkbox
          @change="checkedAllWeek"
          :indeterminate="indeterminateWeek"
          :input-value="isCheckedAllWeek"
          label="All"
          class="ma-0"
        ></v-checkbox>
        <span class="vee-validate-error">
          {{ errors.first("Week") }}
        </span>
      </div>
      <div class="day">
        <h3 class="list-header">Day</h3>
        <v-checkbox
          v-model="selectedDays"
          v-for="(day, index) in days"
          :key="index"
          :value="day"
          :label="day"
          hide-details
          class="mt-0 pb-2"
        ></v-checkbox>
        <v-checkbox
          @change="checkedAllDays"
          v-validate="'required'"
          name="Day"
          :indeterminate="indeterminateDays"
          :input-value="isCheckedAllDays"
          label="All"
          class="ma-0"
        ></v-checkbox>
        <span class="vee-validate-error">
          {{ errors.first("Day") }}
        </span>
      </div>
    </div>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, ModelSync } from "vue-property-decorator";
@Component({
  components: {},
})
export default class ContractTAndC extends Vue {
  @ModelSync("selected", "input", { type: String, default: "" })
  selectedValue!: string;

  setSelectedValue(selectedValue: string) {
    if (selectedValue) {
      const [, monthsValue, , weeksValue, , daysValue] =
        selectedValue.split(":");
      this.selectedMonths = this.strToArr(monthsValue, this.months);
      this.selectedWeeks = this.strToArr(weeksValue, this.weeks);
      this.selectedDays = this.strToArr(daysValue, this.days);
    }
  }

  async getValue() {
    const validate = await this.$validator.validate();
    if (validate) {
      const shortMonth = this.arrToStr(this.selectedMonths, this.months);
      const shortWeeks = this.arrToStr(this.selectedWeeks, this.weeks);
      const shortDays = this.arrToStr(this.selectedDays, this.days);
      let result = `M:${shortMonth}:W:${shortWeeks}:D:${shortDays}`;
      return result;
    } else {
      return false;
    }
  }

  arrToStr(selectedList: string[], list: string[]) {
    return selectedList
      .map((selectedValue) => {
        if (selectedValue === "Any") {
          return selectedValue;
        }
        return list.indexOf(selectedValue) + 1;
      })
      .sort((a, b) => {
        if (a === "Any") {
          return 1;
        } else if (b === "Any") {
          return -1;
        } else {
          return a - b;
        }
      })
      .join(",");
  }
  strToArr(value: string, list: string[]) {
    return value.split(",").map((number) => {
      if (number === "Any") {
        return number;
      }
      const monthIndex = Number(number) - 1;
      return list[monthIndex];
    });
  }
  selectedMonths: Array<string> = [];
  selectedWeeks: Array<string> = [];
  selectedDays: Array<string> = [];
  months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  weeks = [
    "The first week",
    "The second week",
    "The third week",
    "The fourth week",
    "Any",
  ];
  days = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
  ];
  checkedAllMonths(val: boolean) {
    if (val) {
      this.selectedMonths = this.months;
    } else {
      this.selectedMonths = [];
    }
  }
  checkedAllWeek(val: boolean) {
    if (val) {
      this.selectedWeeks = this.weeks;
    } else {
      this.selectedWeeks = [];
    }
  }
  checkedAllDays(val: boolean) {
    if (val) {
      this.selectedDays = this.days;
    } else {
      this.selectedDays = [];
    }
  }
  get isCheckedAllMonths() {
    return this.selectedMonths.length === this.months.length;
  }
  get isCheckedAllWeek() {
    return this.selectedWeeks.length == this.weeks.length;
  }
  get isCheckedAllDays() {
    return this.selectedDays.length == this.days.length;
  }
  get indeterminateMonths() {
    if (
      this.selectedMonths.length > 0 &&
      this.selectedMonths.length < this.months.length
    ) {
      return true;
    } else {
      return false;
    }
  }
  get indeterminateWeek() {
    if (
      this.selectedWeeks.length > 0 &&
      this.selectedWeeks.length < this.weeks.length
    ) {
      return true;
    } else {
      return false;
    }
  }
  get indeterminateDays() {
    if (
      this.selectedDays.length > 0 &&
      this.selectedDays.length < this.days.length
    ) {
      return true;
    } else {
      return false;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Customer/Dialog/ContractTAndC/ContractTAndC.scss";
</style>
